// 主题色变量
@import '@/styles/variables.scss';

.container {
  min-height: 100vh;
  background: $bg-color;
  padding: 20rpx;

  .collection-list {
    .goods-list {
      .goods-item {
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 20rpx;
        box-shadow: $shadow;
        overflow: hidden;

        .goods-wrapper {
          position: relative;
          display: flex;
          padding: 24rpx;
          
          .collection-icon {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            width: 36rpx;
            height: 36rpx;
            padding: 8rpx;
            border-radius: 50%;
            background: rgba(0,0,0,0.1);
            transition: all 0.3s;
            z-index: 1;
            
            &:active {
              transform: scale(0.9);
              opacity: 0.8;
            }
          }

          .goods-img {
            width: 180rpx;
            height: 180rpx;
            border-radius: 12rpx;
            box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
          }

          .goods-info {
            flex: 1;
            padding: 10rpx 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
              font-size: 32rpx;
              font-weight: 500;
              color: $text-color;
              @include text-ellipsis;
              margin-bottom: 12rpx;
              padding-right: 50rpx;
            }

            .description {
              font-size: 26rpx;
              color: $text-color-assist;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              line-height: 1.5;
              margin-bottom: 20rpx;
            }

            .price-box {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-top: auto;

              .price {
                color: $color-warning;
                font-size: 26rpx;
                display: flex;
                align-items: baseline;

                .number {
                  font-size: 36rpx;
                  font-weight: 500;
                  margin-left: 4rpx;
                }
              }

              .btn-box {
                .add-btn {
                  margin: 0;
                  background: $primary-color;
                  border: none;
                  font-size: 26rpx;
                  padding: 12rpx 32rpx;
                  border-radius: 30rpx;
                  color: #fff;
                  transition: all 0.3s;
                  
                  &:active {
                    transform: scale(0.95);
                    opacity: 0.9;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx 40rpx;
    color: $text-color-assist;
    font-size: 28rpx;

    image {
      width: 240rpx;
      height: 240rpx;
      margin-bottom: 30rpx;
      opacity: 0.8;
    }
  }
}

// 适配暗黑模式
@media (prefers-color-scheme: dark) {
  .container {
    background: darken($bg-color, 85%);

    .collection-list .goods-list .goods-item {
      background: darken($bg-color, 80%);

      .goods-wrapper {
        .collection-icon {
          background: rgba(255,255,255,0.1);
        }

        .goods-info {
          .name {
            color: lighten($text-color, 70%);
          }

          .description {
            color: lighten($text-color-assist, 20%);
          }

          .price-box {
            .price {
              color: lighten($color-warning, 5%);
            }

            .btn-box .add-btn {
              background: lighten($primary-color, 5%);
            }
          }
        }
      }
    }
  }
} 